<template>
	<view class="content">
		<view class="block">
			<view class="info1" style="padding-top: 0;">
				<text>手机号</text>
				<input
					type="number"
					value=""
					v-model="phone"
					placeholder="请设置您要绑定的手机号"
				/>
			</view>
			<view class="info1">
				<view class="verificationCd" @click="snd" v-if="isShow">
					立即获取
				</view>
				<u-count-down
					v-else
					class="verificationCd"
					:timestamp="59"
					:show-days="false"
					:show-hours="false"
					:show-minutes="false"
				></u-count-down>
				<text>短信验证码</text>
				<input
					type="number"
					value=""
					placeholder="请填写短信验证码"
					v-model="verificationCd"
				/>
			</view>
		</view>

		<view class="queren" @click="bindMobilePhnNum">确认绑定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			verificationCd: '',
			isShow: true
		};
	},
	onLoad() {},
	onShow() {},
	methods: {
		//发送短信验证码
		async snd() {
			const res = await this.$u.post(
				'api/User/SendSms',
				{ mobile: this.phone },
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp'
				}
			);
			if (!res.code) return uni.$showMsg(res.msg);

			uni.$showMsg(res.msg);
			this.isShow = !this.isShow;
			console.log('res :>> ', res);
		},
		//接收验证码并绑定手机号
		async bindMobilePhnNum() {
			if (!this.verificationCd) return uni.$showMsg('请正确填写');
			
			const res = await this.$u.post(
				'api/User/verification_code',
				{
					mobile: this.phone,
					code: this.verificationCd
				},

				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp'
				}
			);
			console.log('res :>> ', res);
			
				uni.navigateTo({
					url: '../mima/mima?code='+this.verificationCd
				});
			
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx 20rpx;

	.queren {
		width: 630rpx;
		height: 88rpx;
		background: #671729;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		margin: 0 auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-top: 320rpx;
	}
	.block {
		width: 690rpx;
		//height: 401rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 31rpx 42rpx;
		.info1 {
			position: relative;
			padding-top: 70rpx;
			/deep/.u-countdown-time {
				color: #6b182a !important;
			}
			.verificationCd {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 120rpx;
				height: 48rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				border: 1rpx solid #671729;
				border-radius: 6rpx;

				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #671729;
			}
			text {
				height: 31rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
			input {
				margin-top: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1rpx solid #e6e6e6;
			}
		}
	}
}
</style>
